<script setup lang="ts">
import { h, ref, } from "vue"
import { useMessage, NButton, NDataTable } from "naive-ui"
import { getCateList, getSeckillList, updateSeckillPrice } from "@api/index"
import updateSceckill from "./components/updateSceckill.vue"
import pagination from "@/components/pagination.vue"
import { getStorage } from "@/util/cache"
const orgId = getStorage("orgId")
const message = useMessage()
const showModal = ref(false)
const priceData = ref({})
const pageConfig = ref({
  page: 1,
  pageSize: 10,
})
const pageTotal = ref(0)
const cateList: any = ref([])
getCateList({}).then((res: any) => {
  cateList.value = res.data.list
})
const handleGetSeckillList = (data: any) => {
  getSeckillList({ ...data, orgId }).then((res: any) => {
    seckllList.value = res.data.list
    pageTotal.value = res.data?.totalCount
  })
}
const seckllList: any = ref([])
handleGetSeckillList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
const columns = [
  {
    title: "商品ID",
    key: "orderId",
  },
  {
    title: "商品名字",
    key: "orderName",
  },
  {
    title: "商品类型",
    key: "catelogId",
    render(row: any) {
      return cateList.value.find((item: any) => item.cateId === row.catelogId)?.cateName
    },
  },
  {
    title: "状态",
    key: "showStatus",
    render(row: any) {
      return row.showStatus === 1 ? "上架中" : "已下架"
    },
  },
  {
    title: "成本价",
    key: "priceCost",
  },
  {
    title: "优惠价",
    key: "priceDiscounts",
  },
  {
    title: "秒杀价",
    key: "priceSeckill",
  },
  {
    title: "销量",
    key: "saleCount",
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "更新时间",
    key: "updateTime",
  },
  {
    title: "操作",
    key: "action",
    render(row: any) {
      return [
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              showModal.value = true
              priceData.value = {
                orderId: row.orderId,
                priceCost: row.priceCost,
                priceDiscounts: row.priceDiscounts,
                priceSeckill: row.priceSeckill,
              }
            },
          },
          { default: () => "编辑" }
        ),
      ]
    },
  },
]

//编辑商品标签
const handleUpdatePrice = (data: any) => {
  updateSeckillPrice(data).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetSeckillList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
    showModal.value = false
  })
}

const priceSubmit = (data: any) => {
  handleUpdatePrice(data)
  showModal.value = false
}

const priceClose = () => {
  showModal.value = false
}

//分页
const handleChangePage = () => {
  handleGetSeckillList({
    limit: pageConfig.value.pageSize,
    page: pageConfig.value.page,
  })
}
</script>

<template>
  <div class="index">
    <div class="table">
      <n-data-table :columns="columns" :data="seckllList" :pagination="false" :bordered="false" />
      <pagination :pageTotal="pageTotal" :pageConfig="pageConfig" :handleChangePage="handleChangePage" />
    </div>
    <updateSceckill :showModal="showModal" :modalSubmit="priceSubmit" :modalClose="priceClose" :priceData="priceData" />
  </div>
</template>

<style lang="scss" scoped>
.index {
  overflow-y: scroll; //竖向滚动
  overflow-x: scroll; //横向滚动

  .table {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);
  }
}
</style>
